<script setup lang="ts">
import PcPageFooter from './cmpt/PcPageFooter/PcPageFooter.vue'
import QuestionBox from './cmpt/QuestionBox/QuestionBox.vue'
import { useRandomTestingStore } from '@/pages/RandomTesting/store'

const rootStore = useRandomTestingStore()
const { plainStore } = rootStore
const { loading } = plainStore
</script>

<template>
  <WithFooterLayout>
    <ASpin wrapperClassName="continer-wrapper" :spinning="loading">
      <div class="continer">
        <QuestionBox></QuestionBox>
      </div>
    </ASpin>
    <template #footer>
      <PcPageFooter></PcPageFooter>
    </template>
  </WithFooterLayout>
</template>

<style lang="less" scoped>
.continer-wrapper {
  display: block;
  height: 100%;
  width: 100%;
  flex: auto;

  :deep(.ant-spin-container) {
    height: 100%;
  }
}

.continer {
  padding: 16px;
  .title-box {
    font-size: 20px;
    font-weight: 600;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.88);
    line-height: 1.4;
  }
}
</style>
